<!-- 消息框 -->
<template>
  <div class="message">
    <header class="header">
      <div class="friendname">
        {{selectedChat.user.name}}
      </div>
      <i class="el-icon-more el-more" @click="getSelectedChat(selectedChat)"></i>

      <!-- 8.26用户列表 -->
      <div class="user_list" v-show="showBox">
        <ul class="user_listUL">
          <li class='user_list_li' v-if="selectedChat.type == 1">
            <img src="../../../static/img/icon-add.png" @click="showDialogVisible(selectedChat)"  class='user_list_li' alt="">
          </li>
          <li v-if="isDete && selectedChat.type == 1" class='user_list_li'>
            <img src="../../../static/img/icon-jian.png" @click="funMember(selectedChat)" class='user_list_li' alt="">
          </li>
          <li v-if="selectedChat.type == 0">
            <div class="member-box" >
              <img :src="selectedChat.user.portrait" v-if="selectedChat.user.portrait!=''" alt="">
              <img src="../../assets/img/Icon1@2x.png" v-else alt="">
              <p>{{selectedChat.user.name}}</p>
              <el-popover
                placement="bottom"
                width="200"
                trigger="click">
                <div class="header_inif">
                  <div class="header_top">
                    <img :src="selectedChat.user.portrait" v-if="selectedChat.user.portrait!=''" alt="">
                    <img src="../../assets/img/Icon1@2x.png" v-else alt="">
                  </div>
                  <div class="header_text">
                    <h5>昵称：{{setAddress(selectedChat.uid).displayName}}</h5>
                    <p>备注：{{setAddress(selectedChat.uid).alias}}</p>
                    <p>地区：{{setAddress(selectedChat.uid).address ? setAddress(selectedChat.uid).address : ''}}</p>
                  </div>
                </div>
                <p class="maskPS" slot="reference"></p>
              </el-popover>
            </div>
          </li>
          <li v-for="(item,index) in selectedChat.members" :key="index">
              <div class="member-box" v-if="selectedChat.type == 1 && (item.type == 0 || item.type == 2)">
                <img :src="selectedChat.memberListInfo[item.uid].portrait" v-if="selectedChat.memberListInfo[item.uid].portrait!=''" alt="">
                <img src="../../assets/img/Icon1@2x.png" v-else alt="">
                <p>{{selectedChat.memberListInfo[item.uid].alias == ''?selectedChat.memberListInfo[item.uid].displayName:selectedChat.memberListInfo[item.uid].alias}}</p>
                <el-popover
                  placement="bottom"
                  width="200"
                  trigger="click">
                  <div class="header_inif">
                  <div class="header_top">
                    <img :src="selectedChat.memberListInfo[item.uid].portrait" v-if="selectedChat.memberListInfo[item.uid].portrait!=''" alt="">
                    <img src="../../assets/img/Icon1@2x.png" v-else alt="">
                  </div>
                  <div class="header_text">
                    <h5>昵称：{{selectedChat.memberListInfo[item.uid].displayName}}</h5>
                    <p>备注：{{selectedChat.memberListInfo[item.uid].alias}}</p>
                    <p>地区：{{selectedChat.memberListInfo[item.uid].address}}</p>
                  </div>
                  </div>
                  <p class="maskPS" slot="reference"></p>
                </el-popover>
              </div>
          </li>
          </ul>
      </div>

    </header>
    <div class="message-wrapper" ref="list">
      <ul v-if="selectedChat">
        <li v-for="(item,index) in selectedChat.messages" class="message-item" :key="index">
          <!-- <div class="time"><span>{{(item.date,item.date) | dateformat('YYYY-MM-DD HH:mm:ss')}}</span></div> -->
          <div class="time" v-show="dataTime(selectedChat.messages[index - 1] ? selectedChat.messages[index - 1].date : 0, item.date).bl">
            <span>{{dataTime(selectedChat.messages[index - 1] ? selectedChat.messages[index - 1].date : 0, item.date).time | dateformat()}}</span>
          </div>
          <div class="default-box" 
            v-if="item.type == 104 || 
            item.type == 105 || 
            item.type == 106 || 
            item.type == 108 || 
            item.type == 110 || 
            item.type == 90 || 
            item.type == 80||
            item.type == 4 ||
            item.type == 6 ||
            item.type == 7 ||
            item.type == 5 ||
            item.type == 8 ||
            item.type == 100 ||
            item.type == 400 ||
            item.type == 402
            ">
          <span class="default-msg">{{item.content}}</span></div>
          <div class="main" :class="{ self: item.self }" v-else>
            <img class="avatar" width="36" height="36"
                 :src="item.self ? photo(user.portrait) : photo(item.user.portrait)"/>
            <div class="content">
              <!-- 文字 -->
              <div class="text" v-if="item.type == 1" v-html="item.content"></div>
              <!-- 图片 -->
              <el-image :preview-src-list="[''+item.remoteMediaUrl+'']" :src="item.data" v-if="item.type == 3"></el-image>
              <!-- loading -->
              <span v-if="item.loading == 1" class="msg-loading" :style="{ 'right':  !item.self?'-18px':'','left': item.self ? '-18px' : ''}"><i class="el-icon-loading"></i></span>
              <!-- 发送失败 -->
              <span v-if="item.loading == 2" class="msg-loading" :style="{ 'right':  !item.self?'-18px':'','left': item.self ? '-18px' : '','color':'red'}"><i class="el-icon-warning"></i></span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 弹窗 -->

    <el-dialog
      title="请勾选联系人"
      :visible.sync="dialogVisible"
      width="500px">
      <div class='check-box' ref="check">
        <el-row>
          <el-col :span="24">
            <el-checkbox-group v-model="checkList" v-if="isOFF">
              <div class="checkbox-item" v-for="(item,index) in memberLisMap" :key="index">
                <el-checkbox :label="item">
                  <div>
                    <span class="c-item"
                    :style="{ 'background': 'url(' + (item.portrait ? item.portrait : img) + ') center left / 40px no-repeat'}">
                      {{item.alias == '' ? item.displayName : item.alias}}
                    </span>
                  </div>
                </el-checkbox>
              </div>
            </el-checkbox-group>

            <el-checkbox-group v-model="checkList" v-else>
              <div class="checkbox-item" v-for="(item,index) in selectedChat.members" :key="index">
                <el-checkbox :label="item" v-if="item.type == 0">
                  <div>
                    <span class="c-item"
                    :style="{ 'background': 'url(' + (selectedChat.memberListInfo[item.uid].portrait ? selectedChat.memberListInfo[item.uid].portrait : img) + ') center left / 40px no-repeat'}">
                      {{selectedChat.memberListInfo[item.uid].alias == ''?selectedChat.memberListInfo[item.uid].displayName:selectedChat.memberListInfo[item.uid].alias}}
                    </span>
                  </div>
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false;checkList = []">取 消</el-button>
        <el-button type="primary" @click="launchChat(selectedChat)" v-if="isOFF">确 定</el-button>
        <el-button type="primary" @click="remove_member(selectedChat)" v-else>确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex'
  import moment from 'moment' //日期处理
  import imgIcon from '../../assets/img/Icon1@2x.png'
  import store from '../../store';
  import { setTimeout } from 'timers';
  import { drawImage, resizeImage } from '../../libs/util'

  export default {
    data() {
      return {
        img: imgIcon,
        showBox :false,//显示下拉
        checkList: [],
        dialogVisible: false,
        isOFF:'add',//判断删除或者添加
        isDete:false,
        memberLisMap:[],
        people_member:false,
        show: false,
        list:[
          "http://osstest.prozw.com/Fo9pTsL51XcfZ8gyDWk_HA82ZnHx",
          "http://osstest.prozw.com/Fo9pTsL51XcfZ8gyDWk_HA82ZnHx",
          "http://osstest.prozw.com/FmRHVdh5JX-miHm4_CfNXOjQsqLA",
          "http://osstest.prozw.com/FmRHVdh5JX-miHm4_CfNXOjQsqLA",
          "http://osstest.prozw.com/Fi9pNJw9bah02c7uZ89AzL2lSN5A",
          "http://osstest.prozw.com/Fi9pNJw9bah02c7uZ89AzL2lSN5A",
          "http://osstest.prozw.com/FsyZwuyZ0sad28hpkpVI-6VOHpEW",
          "http://osstest.prozw.com/FsyZwuyZ0sad28hpkpVI-6VOHpEW",
        ],
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    },
    computed: {
        ...mapGetters([
            'selectedChat',
            'messages'
        ]),
        ...mapState({
            user: state => state.chat.user,
            friendlist: state => state.chat.friendlist,
            selectId: state => state.chat.selectId
        })
    },
    created(){
      
    },
    mounted() {
      let _this = this;
      //  在页面加载时让信息滚动到最下面
      setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0);

      //全局监听然后显示隐藏用户下拉
      document.body.addEventListener('click',function( event ){
        var className = event.target.className;
        if(className =='user_listUL'||className=='maskPS el-popover__reference'||className == 'user_list_li'){
          _this.showBox = true;
        }else{
          _this.showBox = false;
        }
        if(className == 'el-icon-more el-more'){
          _this.showBox = !_this.showBox;
        }
      },false);

    },
    watch: {
      // 发送信息后,让信息滚动到最下面
      messages() {
        setTimeout(() => this.$refs.list.scrollTop = this.$refs.list.scrollHeight, 0)
      }
    },
    methods: {
      show1(){
        const viewer = this.$el.querySelector('.images').$viewer
        viewer.show()
      },
      popupShow(index){
        const viewer = this.$el.querySelector('.images'+index).$viewer
        viewer.show()
      },
      // 每个图片 
      setImages(url){
        console.log(url)


        return [url]
        // let url = []
        // item.messages.map(e => {
        //   if(e.remoteMediaUrl != ''){
        //      url.push(e.remoteMediaUrl)
        //   }
        // })
        // return url
      },
      //  在发送信息之后，将输入的内容中属于表情的部分替换成emoji图片标签
      //  再经过v-html 渲染成真正的图片
      replaceFace(con) {
        if (con.includes('/:')) {
          var emojis = this.emojis;
          for (var i = 0; i < emojis.length; i++) {
            con = con.replace(emojis[i].reg, '<img src="static/emoji/' + emojis[i].file + '"  alt="" style="vertical-align: middle; width: 24px; height: 24px" />');
          }
          return con;
        }
        return con;
      },
      // 判断是否含有头像
      photo(item) {
        if (item) return item
        else return this.img
      },
      //显示群成员
      showDialogVisible(list){
        this.isOFF = true
        this.dialogVisible = true
        var friendType4Filter = []
        var type4Filter = list.members.filter(item => item.type == 4)
        if(type4Filter.length > 0){
          friendType4Filter = this.friendlist.filter(e => type4Filter.some(k=> e.uid == k.uid))
        }
        var friendFilter = this.friendlist.filter(bitem => list.members.every(aitem =>  bitem.uid != aitem.uid))
        this.memberLisMap = friendType4Filter.length > 0 ? [...friendType4Filter,...friendFilter] : friendFilter
      },
      //添加群成员
      launchChat(lists){
        this.dialogVisible = false
        var obj = {
          list: this.checkList,
          uid:lists.uid
        }
        this.$store.dispatch('add_member',obj)
        this.checkList = []
      },
      //删除已有群成员赋值
      funMember(list){
        this.dialogVisible = true;
        this.isOFF = false;
      },
      //删除群成员
      remove_member(lists){
        this.dialogVisible = false
        var obj = {
          list: this.checkList,
          uid:lists.uid
        }
        this.$store.dispatch('remove_member',obj)
        this.checkList = []
      },
      // 获取个人地区
      setAddress(uid){
          return this.friendlist.find(item => item.uid == uid)
      },
      // 拿到该群的信息
      //获取个人信息对比是不是群主
      getSelectedChat(list){
        if(list.type==0){
          //单聊
            this.people_member = false
        }
        else{
          this.people_member = true
          list.members.map(item=>{
            if(item.type==2){
              if(this.user.userId == item.uid){
                this.isDete = true
              }else{
                this.isDete = false
              }
            }
          })
        }
      },
      // 每隔5分钟显示一次时间
      dataTime(lastTime,time){
        let bl = false
        if(time > lastTime + 5*60*1000){
            bl = true
        }
        return {time:time,bl:bl}
      },
      // 发送图片处理
      thumbnail(content,maxW,maxH){
        var img = new Image()
        img.src = content
        return drawImage(img, maxW, maxH)
      }
    },
    filters: {
      // 将日期过滤
      dateformat(date) {
        // 获取前天
        let qtDay = moment().subtract(2, 'days').format("YYYY-MM-DD")
        // 昨天
        let yesterDay = moment().subtract(1, 'days').format("YYYY-MM-DD")
        // 今天
        let today = moment().subtract(0, 'days').format("YYYY-MM-DD")
        // 展示时间
        let time = moment(date).format('YYYY-MM-DD HH:mm')
        
        if(time.includes(qtDay))return "前天"
        else if(time.includes(yesterDay))return "昨天"
        else if(time.includes(today)) return moment(date).format('HH:mm')
        else return moment(date).format('YY/MM/DD')
      }
    }
  }
</script>

<style lang="stylus" scoped>
    .header_inif{
      width 200px;
      overflow hidden
      .header_top{
        width 200px;
        img{
          width 200px
        }
      }
    }

    .maskPS{
      position absolute
      left 0
      top 0
      width 70px
      height 70px
      background red
      opacity 0
    }

     .check-box {
          height 320px;
          overflow hidden;
          overflow-y auto;
        }
        .checkbox-item {
          .c-item {
            display inline-block;
            height 40px;
            line-height 40px;
            padding-left 50px;
            margin 15px 0;
          }
        }

   .message
      width: 100%
      height: 557px
      .header
        height: 72px
        padding: 28px 0 0 30px
        box-sizing: border-box
        border-bottom: 1px solid #e7e7e7
        position relative
        .el-more {
          position:absolute;
          right:20px;
          top:35%;
          font-size:25px;
          cursor pointer;
        }
        .friendname
            font-size: 18px
            width 300px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        .user_list{
          width 100%;
          height 216px;
          overflow hidden
          padding 24px;
          box-sizing border-box;
          background #fff
          position absolute;
          left 0;
          top 70px;
          z-index 100;
          .user_listUL{
            width 100%
            height 100%;
            overflow-y auto;
            li{
              float left
              text-align center
              margin-left 10px
              cursor pointer
              position relative
              .member-box {
                width 50px
                height 66px
                margin 0 10px
              }
              p{
                font-size 13px
                color #505050
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
              img{
                width 42px
                height 42px
                margin-bottom 3px
                border-radius:50%
                overflow hidden
              }
            }
          }
        }
      .message-wrapper
        min-height: 485px
        max-height: 485px
        padding: 10px 15px
        box-sizing: border-box
        overflow-y: auto
        border-bottom: 1px solid #e7e7e7
        .message
            margin-bottom: 15px
        .time
            width: 100%
            font-size: 12px
            margin: 7px auto
            text-align: center
            span
                display: inline-block
                padding: 4px 6px
                color: #fff
                border-radius: 3px
                background-color: #dcdcdc
        .main
            padding: 6px 0;
            .avatar
                float: left
                margin-left: 15px
                border-radius: 3px
            .content
                .msg-loading 
                  position: absolute;
                  font-size 16px;
                  top 50%
                  margin-top: -11px;
                display: inline-block
                margin-left: 10px
                position: relative
                padding: 6px 10px
                max-width: 330px
                min-height: 36px
                box-sizing: border-box
                font-size: 14px
                text-align: left
                word-break: break-all
                background-color: #fafafa
                border-radius: 4px
                .text 
                  line-height: 24px
                &:before
                    content: " "
                    position: absolute
                    top: 12px
                    right: 100%
                    border: 6px solid transparent
                    border-right-color: #fafafa
                img 
                  vertical-align: middle;
        .self
            text-align: right
            .avatar
                float: right
                margin:0 15px
            .content
                background-color: #b2e281
                &:before
                    right: -12px
                    vertical-align: middle
                    border-right-color: transparent
                    border-left-color: #b2e281


        .default-box {
            text-align center;
            overflow hidden;
        }
        .default-msg {
            text-align left;
            line-height 22px;
            display inline-block;
            font-size 14px;
            background rgba(0, 0, 0, 0.1);
            color #fff;
            margin 0 auto;
            padding 2px 10px;
            border-radius 5px;
            max-width 600px;
            overflow hidden;
            word-break:break-all;
        }
</style>
